﻿<!DOCTYPE html>

<html lang="en">
<!--<![endif]-->
<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<title>jQuery custom scrollbar demo</title>
	<link rel="stylesheet" href="/css/style.css">
	<script type="text/javascript" src="/js/jquery.min.js"></script>
	<script src="/js/jquery.mCustomScrollbar.concat.min.js"></script>	
	<link rel="stylesheet" href="/css/jquery.mCustomScrollbar.css">	
</head>

<body>
	
	<div id="demo">
		<section id="examples">	
			<div class="content mCustomScrollbar">
				<img src="/images/base2.jpg" alt="" width="100%" />
			</div>
			
		</section>
	</div>
	
	<script>
	    (function ($) {
	        $(window).on("load", function () {

	            $("a[rel='load-content']").click(function (e) {
	                e.preventDefault();
	                var url = $(this).attr("href");
	                $.get(url, function (data) {
	                    $(".content .mCSB_container").append(data); //load new content inside .mCSB_container
	                    //scroll-to appended content 
	                    $(".content").mCustomScrollbar("scrollTo", "h2:last");
	                });
	            });

	            $(".content").delegate("a[href='top']", "click", function (e) {
	                e.preventDefault();
	                $(".content").mCustomScrollbar("scrollTo", $(this).attr("href"));
	            });

	        });
	    })(jQuery);
	</script>
</body>
</html>